<!-- 注册
 1. vue始终在用双向绑定的思想来准备前后端交互，每一个vue都会定义好变量给 表单（form）或者表格（table）中的html元素的值绑定
-->
<template>
  <div><!-- element组件库的Dialog对话框默认可以通过点击 modal 关闭 Dialog，即点击空白处弹框可关闭。 -->
    <!-- :visible.sync 子组键改变父组件的值 控制子组件的显示-->
    <el-dialog title="修改" :visible.sync="editDialogIsShow" :before-close="handleClose" :close-on-click-modal="false">
      <el-form :model="ticketrecord" label-width="120px" :rules="editTicketrecordRules" ref="editTicketrecordForm">
        <el-form-item label="厨师订单编号"  prop="cono">
          <el-col :span="8">
            <el-select v-model="ticketrecord.cono" placeholder="请选择">
              <el-option v-for="(ticketrecordgroup,index) in allTicketrecordGroup" :key="ticketrecordgroup.num" :label="ticketrecordgroup.ticketrecordName" :value="ticketrecordgroup.num"/>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="管理员编号" prop="ano">
          <el-col :span="8">
            <el-select v-model="ticketrecord.ano" placeholder="请选择">
              <el-option v-for="(ticketrecordgroup,index) in allTicketrecordAdminGroup" :key="ticketrecordgroup.num" :label="ticketrecordgroup.ticketrecordAdminName" :value="ticketrecordgroup.ticketrecordAdminName"/>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="用户编号" prop="uno">
          <el-col :span="8">
            <el-select v-model="ticketrecord.uno" placeholder="请选择">
              <el-option v-for="(ticketrecordgroup,index) in allTicketrecordUserGroup" :key="ticketrecordgroup.num" :label="ticketrecordgroup.ticketrecordUserName" :value="ticketrecordgroup.num"/>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="饭店编号" prop="rno">
          <el-col :span="8">
            <el-select v-model="ticketrecord.rno" placeholder="请选择">
              <el-option v-for="(ticketrecordgroup,index) in allTicketrecordrnoGroup" :key="ticketrecordgroup.num" :label="ticketrecordgroup.ticketrecordrnoName" :value="ticketrecordgroup.num"/>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="厨师编号" prop="cno">
          <el-col :span="8">
            <el-select v-model="ticketrecord.cno" placeholder="请选择">
              <el-option v-for="(ticketrecordgroup,index) in allTicketrecordcnoGroup" :key="ticketrecordgroup.num" :label="ticketrecordgroup.ticketrecordacnoName" :value="ticketrecordgroup.num"/>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="活动记录名称" prop="trname">
          <el-col :span="8">
            <el-input v-model="ticketrecord.trname"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="状态" prop="cstate">
          <el-col :span="8">
            <el-select v-model="ticketrecord.cstate" placeholder="请选择">
              <el-option v-for="(ticketrecordgroup,index) in allTicketrecordcstateGroup" :key="ticketrecordgroup.num" :label="ticketrecordgroup.ticketrecordcstateName" :value="ticketrecordgroup.ticketrecordcstateName"/>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-col :span="8">
            <el-time-picker placeholder="选择时间" v-model="ticketrecord.ccreatetime" style="width: 200px;"></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="消费时间">
          <el-col :span="8">
            <el-time-picker placeholder="选择时间" v-model="ticketrecord.ccosttime" style="width: 200px;"></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="优惠金额" prop="arcprice">
          <el-col :span="8">
            <el-input v-model="ticketrecord.arcprice"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="总张数" prop="arcnum">
          <el-col :span="8">
            <el-input v-model="ticketrecord.arcnum"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-col :span="8">
            <el-date-picker type="date" placeholder="选择日期" v-model="ticketrecord.arcdate" style="width: 250px;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
        </el-form-item>
      </el-form>
      <span>
      <el-button type="success" @click="editCosttype('editTicketrecordForm')">修改</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
  import api from "../../../../axios/api"
  import rules from "../../../../static/js/validator/rules.js";

  export default {
    name: "editTicketrecord",
    data() {
      return {
        ticketrecord: {fname: "", fbegindate: "", fenddate: "", fdescribe: ""},
        editDialogIsShow: false,
        allTicketrecordGroup:[{num:8001,"ticketrecordName":"节日优惠券"},{num:8002,"ticketrecordName":"满减优惠券"}],
        allTicketrecordAdminGroup:[{num:0,"ticketrecordAdminName":"0001"},{num:1,"ticketrecordAdminName":"0002"}],
        allTicketrecordUserGroup:[{num:190001,"ticketrecordUserName":"蔡定军"},{num:190002,"ticketrecordUserName":"陈贝贝"}],
        allTicketrecordrnoGroup:[{num:15001,"ticketrecordrnoName":"好吃餐厅"},{num:15002,"ticketrecordrnoName":"大众饭店"}],
        allTicketrecordcnoGroup:[{num:7001,"ticketrecordacnoName":"王大厨"},{num:1,"ticketrecordacnoName":"张大厨"}],
        allTicketrecordcstateGroup:[{num:0,"ticketrecordcstateName":"已过期"},{num:1,"ticketrecordcstateName":"进行中"}],
        editTicketrecordRules:{ trname: [{required: true, message: "名称不能为空", trigger: 'blur'},
            {max: 20, min: 2, message: '长度异常 长度在2-20之间', trigger: 'blur'}, {
              pattern: /^[\u0391-\uFFE5A-Za-z]+$/,
              message: '名称必须为中文',
              trigger: 'blur'
            }],
          afcprice: [{required: true, message: "优惠券面额不能为空", trigger: 'blur'},
            {max: 20, min: 2, message: '长度异常 长度在2-20之间', trigger: 'blur'}, {
              pattern: /^\d+$|^\d+[.]?\d+$/,
              message: '金额必须为数字',
              trigger: 'blur'
            }],
          arcprice: [{required: true, message: "优惠券金额不能为空", trigger: 'blur'},
            {max: 20, min: 2, message: '长度异常 长度在2-20之间', trigger: 'blur'}, {
              pattern: /^\d+$|^\d+[.]?\d+$/,
              message: '优惠券金额必须为数字',
              trigger: 'blur'
            }],
          arcnum: [{required: true, message: "总张数不能为空", trigger: 'blur'},
            {max: 20, min: 2, message: '长度异常 长度在2-20之间', trigger: 'blur'}, {
              pattern: /^\d+$|^\d+[.]?\d+$/,
              message: '总张数必须为数字',
              trigger: 'blur'
            }],
        }
      }
    },
    methods: {
      editCosttype: function (editTicketrecordForm) {
        this.$refs[editTicketrecordForm].validate(valid => {//此处refs对象和标签上的ref对应
          if (valid) {
            //如果通过验证 to do...
            //console.log(this.ticketrecord);
            this.setDataFromAxios();
            alert(this.ticketrecord.trname + "添加成功");
            this.handleClose();

          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      //页面初始化时加载的事件
      init(ticketrecord) {
        this.editDialogIsShow = true;
        this.ticketrecord = ticketrecord;
        console.log(ticketrecord);
      },

      //关闭页面
      handleClose() {
        this.editDialogIsShow = false;
        //给父组件传参
        this.$emit("editDialogIsShow", this.editDialogIsShow);
      },
      setDataFromAxios: function () {
        alert(this.$store.state.host);
        console.log(this.ticketrecord);
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios(this.$store.state.host + "ticketRecordController/updateTicketRecordByArcno", this.ticketrecord, "post")
          .then(res => {
            this.leagues = res.leagues
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
    },

    //监听
    watch: {
      dialogisShow(newValue, oldValue) {
        this.editDialogIsShow = newValue;
      }
    }

  }
</script>

<style scoped>

</style>
